<script setup lang="ts">
import { ref, computed, onMounted, reactive } from 'vue';
import { useToast } from 'primevue/usetoast';
// @ts-ignore
import { useField, useForm, ErrorMessage } from 'vee-validate';
// @ts-ignore
import * as yup from 'yup';
import { LoginApi } from "@/api/login";
import router from "@/router"; // 使用Yup进行验证规则定义
import { useUserStore } from "@/stores/modules/user";




const userStore = useUserStore();


const accept = ref();

interface Shape {
  id: number;
  left: number;
  top: number;
  path: string;
  rotation: number;
}

const shapes = ref<Shape[]>([]);

onMounted(() => {
  for (let i = 0; i < 8; i++) {
    shapes.value.push({
      id: i,
      left: Math.random() * 100,
      top: Math.random() * 100,
      path: `M${Math.random() * 50},${Math.random() * 50}
             L${Math.random() * 50},${Math.random() * 50} 
             L${Math.random() * 50},${Math.random() * 50} Z`,
      rotation: Math.random() * 360,
    });
  }
});
// const logoUrl = computed(() => {
//     return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
// });



// 定义验证规则
const schema = yup.object({
  username: yup.string().required('用户名不能为空').min(6, '用户长度至少为6个字符'),
  password: yup.string().required('密码不能为空').min(6, '密码长度至少为6个字符'),
});


const { handleSubmit, resetForm } = useForm();
const { value: username, errorMessage: usernameError } = useField('username', schema.fields.username);
const { value: password, errorMessage: passwordError } = useField('password', schema.fields.password);
const toast = useToast();


const onSubmit = handleSubmit(() => {
  LoginApi({ account: username._value, password: password._value }).then(res => {
    console.log(res.data)
    // window.localStorage.setItem("token", res.data.token);
    // 存储token到pinia中
    // debugger;
    userStore.setToken(res.data.token);
    userStore.setUserInfo(res.data);

    router.push({ path: "/" })
    // window.localStorage.setItem("token", token);
    toast.add({ severity: 'success', summary: '登录成功', detail: '欢迎登录' + res.data.nickname, life: 3000 });

  }).catch(err => {
    toast.add({ severity: 'error', summary: '登录失败', detail: '账号或密码错误', life: 3000 });

  });
});

</script>

<template>
  <div class="md:flex w-full h-screen bg-green-100">
    <div class=" hidden flex-grow-8 h-full  md:flex justify-center  relative overflow-hidden">
      <p v-for="shape in shapes" :key="shape.id" :style="{
        left: `${shape.left}%`,
        top: `${shape.top}%`,
        transform: `rotate(${shape.rotation}deg)`,
      }" class=" absolute text-green-500 fill-current opacity-50"></p>
      <img src="/img/loginBg.svg" class="w-60" alt="">
    </div>
    <div class="flex flex-grow-3 h-full  items-center justify-center bg-green-100">
      <div class="w-80 bg-white p-5 rounded-lg shadow-md">
        <div class="flex items-center justify-center">
          <img src="@/assets/primeVue.svg" class="w-8 h-auto mr-2" alt="">
          <span class="text-center text-3xl mb-3">智慧阅卷平台</span>
        </div>
        <div v-focustrap class="w-full mt-5" :validation-schema="schema">
          <span class="p-float-label p-input-icon-left mt-5 mb-2">
            <!-- <i class="pi pi-user" /> -->
            <InputText id="username" v-model="username" />
            <label for="username">用户名</label>
          </span>
          <small id="username" class="p-error">{{ usernameError || '&nbsp;' }}</small>
          <span class="p-float-label p-input-icon-left mt-5 mb-2">
            <!-- <i class="pi pi-lock" /> -->
            <InputText id="password" type="password" v-model="password" toggleMask />
            <label for="password">密码</label>
          </span>
          <small class="p-error">{{ passwordError || '&nbsp;' }}</small>
          <div class="field-checkbox mb-5">
            <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
            <label for="accept" class="ml-2">记住密码.</label>
          </div>
          <Button type="submit" label="登录" class="w-full mb-2" @click="onSubmit" />
          <span class=" text-gray-400">还没有账号？</span><a href="/auth/register" class=" text-blue-600">去注册</a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* .h-screen {
    background-image: url('/img/loginBg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
} */


p:before {
  position: absolute;
  content: '';
  z-index: 1;
  background: linear-gradient(90deg, #7f56da 0%, rgba(44, 31, 74, 1) 100%);
  background: linear-gradient(90deg, #76ff03 0%, #64dd17 100%);
  width: 70px;
  height: 70px;
  display: block;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 20px 0 rgba(16, 39, 112, .3);
  animation: border-transform 6s linear infinite;

}

@keyframes border-transform {

  0%,
  100% {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  }

  14% {
    border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
  }

  28% {
    border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
  }

  42% {
    border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
  }

  56% {
    border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
  }

  70% {
    border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
  }

  84% {
    border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
  }
}
</style>
